<template>
    <section ref="mgBox">
        <canvas ref="cav" class="border"></canvas>
        <div class="board-opt">
            <div class="opt-btn" @click="clearBoard">清除</div>
            <div class="opt-btn bg-primary" @click="downloadBoardImg">下载图片</div>
        </div>
    </section>
</template>

<script>

    /**
     *@Description:画板
     *@author ZY
     *@date 2022/11/20 21:38
     */
    export default {
        name: "canvas-board",
        data() {
            return {
                clientWidth: window.innerWidth - 300,
            }
        },
        mounted() {
            this.main()
        },
        methods: {
            main() {
                let that = this
                // 画弹性小球
                let boardCanvas = this.$refs.cav
                boardCanvas.height = 430
                boardCanvas.width = window.innerWidth - 300
                let boardCtx = boardCanvas.getContext('2d')
                this.drawBoard(boardCanvas, boardCtx)

            },
            /**
             * @Description: 小画板
             * @author ZY
             * @date 2022/11/20 17:14
             * @return {Object} 返回值描述
             * @param dom canvas元素
             * @param {Object} ctx canvas上下文
             */
            drawBoard(dom, ctx) {
                let x1, y1, x2, y2, a = 10
                let colors = "green";
                //区分PC还是手机
                let hastouch = "ontouchstart" in window,
                    tapstart = hastouch ? "touchstart" : "mousedown",
                    tapmove = hastouch ? "touchmove" : "mousemove",
                    tapend = hastouch ? "touchend" : "mouseup";

                //笔触圆滑
                ctx.lineCap = "round";
                ctx.lineJoin = "round";
                ctx.lineWidth = a;
                ctx.strokeStyle = colors;

                //touchstart或者mousedown
                dom.addEventListener(tapstart, function (e) {
                    e.preventDefault();
                    x1 = hastouch ? e.targetTouches[0].offsetX : e.offsetX;
                    y1 = hastouch ? e.targetTouches[0].offsetY : e.offsetY;
                    ctx.beginPath()
                    ctx.moveTo(x1, y1);
                    ctx.lineTo(x1 + 1, y1 + 1);  //考虑到点击时能画出一个点
                    ctx.stroke();

                    //touchmove或者mousemove
                    dom.addEventListener(tapmove, tapmoveHandler);

                    //touchend或者mouseup
                    dom.addEventListener(tapend, function () {
                        dom.removeEventListener(tapmove, tapmoveHandler);
                    });

                    //move时的处理函数
                    function tapmoveHandler(e) {
                        e.preventDefault()
                        x2 = hastouch ? e.targetTouches[0].offsetX : e.offsetX;
                        y2 = hastouch ? e.targetTouches[0].offsetY : e.offsetY;
                        ctx.moveTo(x1, y1);
                        ctx.lineTo(x2, y2);
                        ctx.stroke();
                        x1 = x2;
                        y1 = y2;
                    }

                })
            },
            //清除画小画板内容
            clearBoard() {
                let boardCanvas = this.$refs.cav
                let boardCtx = boardCanvas.getContext('2d')
                boardCtx.clearRect(0, 0, this.clientWidth, 430)
            },
            // 下载画板图片
            downloadBoardImg() {
                let boardCanvas = this.$refs.cav
                let a = document.createElement('a')
                a.download = '画板'
                a.href = boardCanvas.toDataURL('image/jpeg')
                document.body.appendChild(a)
                a.click()
                document.body.removeChild(a)
            },
        }
    }
</script>

<style lang="scss" scoped>
    .border {
        border: 1px solid #dbdbdb;
        border-radius: 5px;
        overflow: hidden;
    }

    .board-opt {
        display: flex;
        padding: 8px 10px;

        .opt-btn {
            padding: 8px 20px;
            background-color: #eee;
            border-radius: 5px;
            cursor: pointer;
            margin-right: 10px;

            &:hover {
                background-color: rgba(#eee, 0.8);
            }
        }

        .bg-primary {
            background-color: $color-primary;

            &:hover {
                background-color: rgba($color-primary, 0.8);
            }
        }

    }
</style>
